<template>
  <div>
    <div class="vux-demo">
      <img class="logo" src="../assets/logo.png">
      <h1>星恒通</h1>
    </div>
    <group title="设置">
      <cell title="地址和端口" :value="$store.state.ipAndPort" @click.native.prevent="handleIpChange" is-link></cell>
      <cell title="检测线" :value="$store.state.carInfo.jcxdh" @click.native.prevent="handleJcxChange" is-link></cell>
      <x-number title="检测线" v-model="$store.state.carInfo.jcxdh"></x-number>
      <cell title="基本地址" :value="$store.getters.uri"></cell>
      <cell title="检测连接" :value="$store.state.checkConn?'连接成功':'连接失败'" :is-loading="checkLoading" @click.native.prevent="handleCheckConn" is-link></cell>
      <cell title="版本" value="1.6.1"></cell>
    </group>
  </div>
</template>

<script>
  import {Group, Cell} from 'vux'

  export default {
    components: {
      Group,
      Cell
    },
    data() {
      return {
        // note: changing this line won't causes changes
        // with hot-reload because the reloaded component
        // preserves its current state and we are modifying
        // its initial state.
        msg: 'Hello World!',
        checkLoading: false
      }
    },
    methods: {
      handleIpChange() {
        const _this = this;
        this.$vux.confirm.setInputValue(this.$store.state.ipAndPort);
        this.$vux.confirm.show({
          showInput: true,
          // 组件除show外的属性
          onCancel () {
          },
          onConfirm (value) {
            _this.$store.commit('setIpAndPort', value);
            _this.handleCheckConn();
            window.localStorage.ipAndPort = value;
          }
        })
      },
      handleCheckConn() {
        this.checkLoading = true;
        this.$store.commit('setCheckConn', false);
        this.$http.post(this.$store.getters.uri, {api: 200},{timeout: 5000}).then(res => {
          this.checkLoading = false;
          const {data} = res;
          if (data.code !== 200) {
            return;
          }
          this.$store.commit('setCheckConn', true);
        }).catch(e => {
          this.checkLoading = false;
          this.$error(e);
        })
      },
      handleJcxChange() {
        const _this = this;
        this.$vux.confirm.setInputValue(this.$store.state.carInfo.jcxdh);
        this.$vux.confirm.show({
          showInput: true,
          type: 'number',
          // 组件除show外的属性
          onCancel () {
          },
          onConfirm (value) {
            if (isNaN(value - 0)) {
              return;
            }
            _this.$store.commit('setCarInfo', {jcxdh: value});
            window.localStorage.jcxdh = value;
          }
        })
      }
    },
    created() {
      this.$store.commit('setTitle','主页');
      this.handleCheckConn();
    }
  }
</script>

<style>
  .vux-demo {
    text-align: center;
  }

  .logo {
    width: 100px;
    height: 100px;
    margin: 10px 0 0 0;

  }

  h1 {
    font-size: 1rem;
  }

</style>
